<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="逯灿灿">
    <title>唯品会</title>
    <link rel="stylesheet" href="./css/header.css">
    <link rel="stylesheet" href="./css/logoimg.css">
    <link rel="stylesheet" href="./css/nav.css">
    <link rel="stylesheet" href="./css/box.css"> 
    <link rel="stylesheet" href="./css/fasten.css"> 
    <link rel="stylesheet" href="./css/main.css"> 
    <style>
    *{
        box-sizing: border-box;
    }
    body{
        margin: 0;
    }
    ul{
        list-style: none;
        margin: 0;
        padding: 0;
        /* display: flex; */
    }
    li{
        margin: 0;
        padding: 0 10px;
    }
    .container{
        width: 1150px;
        margin: 0 auto;
    }
    a{
        text-decoration: none;
        line-height: 30px;
        font-size: 14px;
        color: #666666;
    }
    .clearfix::after{
        content: '';
        clear: both;
        display: block;
        height: 0;
        visibility: hidden;
    }
    </style>
</head>

<body>
    <!--头部  -->
    <header>
        <div class="container head">
            <ul class="head-left">
                <li class="bg-white login"><a href="#">河南<span class="icon"></span></a>
                     <ul class="head-one">
                        <li class="fide"></li>
                        <h3>所在区域</h3>
                        <hr>  
                        <li><strong>A</strong>&#x3000;<a href="#">安徽&#x3000;</a><a href="#">澳门</a></li>
                        <li><strong>B</strong>&#x3000;<a href="#">北京</a></li>
                        <li><strong>C</strong>&#x3000;<a href="#">重庆</a></li>
                        <li><strong>F</strong>&#x3000;<a href="#">福建</a></li>
                        <li><strong>H</strong>&#x3000;<a href="#">河北&#x3000;</a><a href="#">河南</a></li> 
                     </ul>  
                </li>
            </ul>
            <ul class="head-right">
                <li class="bg-white login"><a href="#">请登录</a>
                     <ul class="head-one">
                         <li class="fide"></li> 
                        <span class="icon4"></span><span>请登录</span>
                        <hr>
                        <li><a href="#">我的收藏</a></li>
                        <li><a href="#">我的订单</a></li>
                        <li><a href="#">零钱</a></li>
                        <li><a href="#">我的优惠券</a></li>
                        <li><a href="#">我的唯品币</a></li>
                        <li><a href="#">唯品金融</a></li>
                    </ul> 
                </li>/
                <li><a href="#">注册</a></li>/
                <li class="qiandao"><span class="icon2"></span>签到有礼<a href="#"></a>
                    <ul class="head-two"><span class="arrow"></span>
                        <hr>
                        <li><span class="icon3"><p>1天</p></span>
                            <span class="icon3"><p>2天</p></span>
                            <span class="icon3"><p>3天</p></span>
                            <span class="icon3"><p>4天</p></span>
                            <span class="icon3"><p>5天</p></span>
                            <span class="icon3"><p>6天</p></span>
                            <span class="icon3"><p>7天</p></span></li>
                            <li><br><a href="">每天签到送惊喜</a><button type="button" id="qiandao">签到</button></li>
                         
                    </ul>     
                </li>/
                <li><a href="#">我的订单</a></li>
                <li class="bg-white login"><a href="#">我的特卖 <span class="icon"></span></a>
                    <ul class="head-three">
                        <li class="fide"></li>
                        <li><a href="#">品牌收藏(0)</a></li>
                        <li><a href="#">商品收藏(0)</a></li>
                        <li><a href="#">我的足迹(0)</a></li>
                    </ul> 
                </li>/
                <li class="bg-white login"><a href="#">会员俱乐部 <span class="icon"></span></a>
                    <ul class="head-three">
                        <li class="fide"></li>
                        <li><a href="#">俱乐部首页</a></li>
                        <li><a href="#">唯品币兑换</a></li>
                        <li><a href="#">免费抽大奖</a></li>
                    </ul> 
                </li>/
                <li class="bg-white login"><a href="#">客户服务 <span class="icon"></span></a>
                    <ul class="head-three">
                        <li class="fide"></li>
                        <li><a href="#">联系客服</a></li>
                        <li><a href="#">帮助中心</a></li>
                        <li><a href="#">服务中心</a></li>
                        <li><a href="#">知识产权投诉</a></li>
                    </ul> 
                </li>/
                <li class="bg-white login"><a href="#"><span class="icon5"></span>&nbsp;手机版</a>
                    <ul class="head-four">
                        <li class="fide"></li>
                        <img src="./img/1466134037230.jpg" alt="">
                        <a href="#">随时逛及时抢</a>
                    </ul> 
                </li>/
                <li class="bg-white login"><a href="#">更多 <span class="icon"></span></a>
                     <ul class="head-five">
                         <li class="fide"></li>
                        <h3>合作专区</h3>
                        <li><a href="#">联名卡申请</a></li>
                        <li><a href="#">唯品卡</a></li>
                        <li><a href="#">支付专区</a></li><br>
                        <h3>合作专区</h3>
                        <li><a href="#">联名卡申请</a></li>
                        <li><a href="#">唯品卡</a></li>
                        <li><a href="#">支付专区</a></li>
                    </ul> 
                </li>
            </ul>
        </div>
    </header>
    <!--logo图  -->
    <div class="container logoimg">
        <div class="logo">
            <img src="./img/1496219375910.png" alt="">
        </div>
        <div class="logoright">
            <ul>
                <li><img src="./img/1466131264367.png" alt=""></li>
                <li><img src="./img/1466131266290.png" alt=""></li>
                <li><img src="./img/1466131268726.png" alt=""></li>
                <li><a href="#"><span class="icon6"></span><strong> 我的购物袋</strong></a>
                    <ul class="pleaselogin">
                        <li>还未登录，<a href="#">请登录</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <!--导航栏  -->
    <nav class="nav">
        <div class="container navlist">
            <ul class="navlist-left">
                <li class="active"><a href="#">首页</a></li>
                <li><a href="#">唯品国际</a></li>
                <li><a href="#">母婴</a></li>
                <li><a href="#">家具家电</a></li>
                <li><a href="#">男士</a></li>
                <li><a href="#">美妆</a></li>
                <li><a href="#">生活超市</a></li>
                <li><a href="#">金融</a></li>
                <li><a href="#">更多 <span class="icon"></span></a>
                    <div class="navlist-left-classisy">
                        <section><img src="./img/1.jpg" alt=""><span><h2>女装</h2></span></section>
                        <section><img src="./img/2.jpg" alt=""><span><h2>鞋包</h2></span></section>
                        <section><img src="./img/3.jpg" alt=""><span><h2>配饰</h2></span></section>
                        <section><img src="./img/4.jpg" alt=""><span><h2>运动</h2></span></section>
                        <section><img src="./img/5.jpg" alt=""><span><h2>淑女</h2></span></section>
                    </div>
                </li>
            </ul>
            <ul class="navlist-right clearfix">
                <li><a href="#"><span class="icon7"></span> 分类</a></li>
                <li><a href="#"><span class="icon8"><a href="#">  预告</a></li>
            </ul>
        </div>
    </nav>
    <!--轮播  -->
    <div class="box">
        <div class="container banner">
            <ul class="img-list clearfix">
                <li class="current"><a href="#"><img src="./img/lunbo01.jpg" alt=""></a></li>
                <li><a href="#"><img src="./img/lunbo02.jpg" alt=""></a></li>
                <li><a href="#"><img src="./img/lunbo03.jpg" alt=""></a></li>
                <li><a href="#"><img src="./img/lunbo04.jpg" alt=""></a></li>
            </ul>
        </div>
        <div class="container indicator">
            <ul class="indicator-top clearfix">
                <li class="active1"><a href="#">欧莱雅VIP大牌日</a></li>
                <li><a href="#">时尚风暴&nbsp;最高满199减40</a></li>
                <li><a href="#">居家夏末 福利大派发</a></li>
                <li><a href="#">全球早秋扫货指南</a></li>
            </ul>
            <ul class="indicator-foot clearfix">
                <li class="active2"></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
    <!--固定导航条  -->
    <div class="fasten">
        <ul class="fasten-top">
            <li><img src="./img/people-black.png" alt="">
                <div class="fasten-message">
                    <div class="fasten-message-top">
                        <span class="icon11"></span><br>
                        <p>你好，请<a href="#"> 登录 </a>|<a href="#"> 注册</a></p>
                    </div>
                    <div class="fasten-message-middle">
                        <div><span class="icon12 r10"></span><p>我的订单</p></div>
                        <div><span class="icon12 r11"></span><p>我的订单</p></div>     
                    </div>
                    <div class="fasten-message-foot">
                        <a href="">会员俱乐部</a>
                    </div>
                </div>
            </li>
            <li><img src="./img/shopBag.png" alt=""></a>
            </li>
            <li><img src="./img/money-black.png" alt="">
                <div class="fasten-message2">
                    <a href="#">我的优惠券</a>
                </div>
            </li>
            <li><img src="./img/heart-black.png" alt="">
                <div class="fasten-message2">
                    <a href="#">我的优惠券</a>
                </div>
            </li>
            <li><img src="./img/start-black.png" alt="">
                <div class="fasten-message2">
                    <a href="#">我的优惠券</a>
                </div>
            </li>
            <li><img src="./img/time-black.png" alt="">
                <div class="fasten-message2">
                    <a href="#">我的优惠券</a>
                </div>
            </li>
        </ul>
         <ul class="fasten-foot">
            <li><img src="./img/qianbi-black.png" alt="">
                <div class="fasten-message2">
                    <a href="#">我的优惠券</a>
                </div>
            </li> 
            <li class="back"><img src="./img/back-black.png" alt="">
                <div class="fasten-message2">
                    <a href="#">返回顶部</a>
                </div>
            </li>
        </ul> 
    </div>
    <!--主要内容  -->
    <main>
        <div class="container hotimg">
            <div class="hotimg-right">
                <section><a href="#"><span class="icon9 r1"></span><img src="./img/1502078817176.jpg" alt=""></a></section>
                <section><a href="#"><span class="icon9 r2"></span><img src="./img/1502078828997.jpg" alt=""></a></section>
                <section><a href="#"><span class="icon9 r3"></span><img src="./img/1502078840972.jpg" alt=""></a></section>
            </div>
        </div>
        <div class="container assortment">
            <ul class="assortment-top">
                <li><a href="#"><img src="./img/bag_v2.jpg" alt=""><p>鞋包馆</p></a></li>
                <li><a href="#"><img src="./img/food_v2.jpg" alt=""><p>鞋包馆</p></a></li>
                <li><a href="#"><img src="./img/global_v2.jpg" alt=""><p>鞋包馆</p></a></li>
                <li><a href="#"><img src="./img/kid_v2.jpg" alt=""><p>鞋包馆</p></a></li>
                <li><a href="#"><img src="./img/man_v2.jpg" alt=""><p>鞋包馆</p></a></li>
                <li><a href="#"><img src="./img/sport_v2.jpg" alt=""><p>鞋包馆</p></a></li>
                <li><a href="#"><img src="./img/beauty_v2.jpg" alt=""><p>鞋包馆</p></a></li>
                <li><a href="#"><img src="./img/more.jpg" alt=""><p>更多分类</p></a></li>
            </ul>
            <ul class="assortment-foot">
                <li><img src="./img/clothes_bg_v2.jpg" alt="">
                    <ul>
                        <li><a href="#"><img src="./img/clothes_01_v2.jpg" alt=""><p>连衣裙</p></a></li>
                        <li><a href="#"><img src="./img/clothes_02_v2.jpg" alt=""><p>连衣裙</p></a></li>
                        <li><a href="#"><img src="./img/clothes_03_v2.jpg" alt=""><p>连衣裙</p></a></li>
                        <li><a href="#"><img src="./img/clothes_04_v2.jpg" alt=""><p>连衣裙</p></a></li>
                    </ul>
                </li>
                <li><img src="./img/beauty_bg_v2.jpg" alt="">
                    <ul>
                        <li><a href="#"><img src="./img/beauty_01_v2.jpg" alt=""><p>人气彩妆</p></a></li>
                        <li><a href="#"><img src="./img/beauty_02_v2.jpg" alt=""><p>人气彩妆</p></a></li>
                        <li><a href="#"><img src="./img/beauty_03_v2.jpg" alt=""><p>人气彩妆</p></a></li>
                        <li><a href="#"><img src="./img/beauty_04_v2.jpg" alt=""><p>人气彩妆</p></a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="container replace">
            <img src="./img/today_DDp.png" alt="">
        </div>
    </main>

    <script src="./js/唯品会.js"></script>
</body>

</html>
